<template>
  <div class="edit-template-dialog">
    <el-dialog :visible.sync="visible"
               :title="(dialogStatus === 'create' ? '新增' : '编辑')+'模板'"
               :close-on-click-modal="false"
               width="600px"
               @close="dialogClose">
      <el-form :model="editTemplateForm"
               :rules="formRules"
               ref="editTemplateForm"
               label-width="100px">
        <el-form-item label="模板名称"
                      prop="image_name">
          <el-input v-model="editTemplateForm.image_name"
                    :placeholder="'请输入模板名称'">
          </el-input>
        </el-form-item>
        <el-form-item label="备注"
                      prop="remark">
          <el-input type="textarea"
                    v-model="editTemplateForm.remark"
                    placeholder="请输入备注">
          </el-input>
        </el-form-item>

      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button @click="editTemplate"
                   type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ImageProgressApi } from '@/services/WorkCenter'
export default {
  components: {

  },
  data () {
    return {
      editTemplateForm: {
        project_id: '',
        image_name: '',
        remark: ''
      },
      resetForm: {
        project_id: '',
        image_name: '',
        remark: ''
      },
      formRules: {
        image_name: [
          { required: true, message: '请输入模板名称', trigger: 'blur' }
        ]
      },
      visible: false
    };
  },
  watch: {
    dialogVisible (newval) {
      this.visible = newval;
    },
    dialogForm: {
      handler (newval) {
        let temp = JSON.parse(JSON.stringify(newval));
        let reset = JSON.parse(JSON.stringify(this.resetForm))
        this.editTemplateForm = Object.assign(reset, temp)
      },
      deep: true
    }
  },
  props: {
    dialogVisible: {
      type: Boolean
    },
    dialogStatus: {
      type: String,
      default: "create"
    },
    dialogForm: {
      type: Object
    },
    callback: {
      type: Function
    }
  },
  methods: {
    editTemplate () {
      this.$refs.editTemplateForm.validate((valid) => {
        if (valid) {
          let store = this.$store.state.choosedProject
          this.editTemplateForm.project_id = store.project_id
          if (this.dialogStatus === 'create') {
            this.createTemplate()
          } else {
            this.updateTemplate()
          }
        }
      })
    },
    createTemplate () {
      ImageProgressApi.createTemplate({
        data: this.editTemplateForm
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('新增模板成功')
          this.dialogClose()
          this.$emit('callback', '')
        }
      })
    },
    updateTemplate () {
      ImageProgressApi.updateTemplate({
        data: this.editTemplateForm
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('修改模板成功')
          this.dialogClose()
          this.$emit('callback', '')
        }
      })
    },
    dialogClose () {
      this.$refs.editTemplateForm.resetFields();
      this.$emit("update:dialogVisible", false);
    },
  },
  created () {

  },
  mounted () {

  },
};
</script>

<style scoped lang="scss">
.edit-template-dialog {
}
</style>
